<script setup lang="ts">
import { ref } from 'vue'
import { doPutOrderVerification } from '@/apis/order'
import { useStoreInfoStore } from '@/store/modules/storeInfo'

const code = ref('')
const $useStoreInfoStore = useStoreInfoStore()

const handleConform = () => {
  if (!code.value.length) return uni.$msg('请输入核销码')
  orderVerification(code.value)
}

async function orderVerification(cd: string) {
  const { code: state, data, msg } = await doPutOrderVerification({ code: cd, storeId: $useStoreInfoStore.storeId })
  if (state !== 200) return uni.$msg(msg ? msg : '门店订单核销失败')
  uni.$msg('订单核销成功')
  code.value = ''
}
</script>

<template>
  <view class="code">
    <view class="code__title">输入核销码</view>
    <view class="code__compose">
      <u-input v-model.trim="code" type="number" class="code__compose--input" placeholder="请输入核销码" size="large" maxlength="10" />
      <view class="code__compose--confirm" @click="handleConform">确认</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@include b(code) {
  width: 712rpx;
  height: 414rpx;
  margin: 0 auto;
  background: #fff;
  padding: 80rpx 0 0 0;
  margin-top: 24rpx;
  border-radius: 12rpx;
  @include e(title) {
    width: 260rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333333;
    margin: 0 auto 48rpx;
  }
  @include e(compose) {
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 506rpx;
    border: 1px solid #4755e9;
    border-radius: 14rpx;
    padding-left: 30rpx;
    @include m(input) {
      width: 400rpx;
      font-size: 28rpx;
      color: #333333;
    }
    @include m(confirm) {
      width: 106rpx;
      height: 106rpx;
      background: #4755e9;
      font-size: 28rpx;
      color: #fff;
      text-align: center;
      line-height: 106rpx;
      border-radius: 0px 10rpx 10rpx 0px;
    }
  }
}
</style>
